﻿@section title 
{
鲜享家靓号卡
}
@section pagetitle
{
鲜享家靓号卡
}
@model  RiderShop.Mobile.Modle.CustomerModel
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <title>蓉记·鲜享卡列表</title>
    <link rel="stylesheet" href="~/Themes/RongJi/Style/xianxiangcardsubscribe/xianxiangcardselect/dist/css/mycards.css">
</head>
<body>
    <div class="wrapper">
        @*    <input type="text" value=[{"rowNumber":2,"cardNumber":2980021520000008888},{"rowNumber":1,"cardNumber":2980021510000008888},{"rowNumber":3,"cardNumber":2980021530000008888},{"rowNumber":4,"cardNumber":2980021540000008888}] id="allCardNumber">*@
        <ul class="tabs">
            <li class="active" id="allCard" onclick="changeDetailTable(this, event, 1);">全部</li>
            <li id="lianhaoCard" onclick="changeDetailTable(this, event, 2);">推荐靓号</li>
            <li id="weishuxiangtongCard" onclick="changeDetailTable(this, event, 3);">位数同号</li>
        </ul>
                         <input type="hidden" id="SelectedCardNumber"  style="width:500px">

        <div class="cards-wrapper">
            <ul class="cardsList" id="tabs-1">

                @foreach (var card in Model.XianXiangCardList.Data)
                {
                    if (card.Status == 0)
                    {
                        <li>
                            <h4><label for="@card.CardNumber.Trim()">@card.CardNumber.Substring(0, 4) @Html.Raw(" ") @card.CardNumber.Substring(4, 4) @Html.Raw(" ") @card.CardNumber.Substring(8, 4) @Html.Raw(" ")  @card.CardNumber.Substring(12, 4) @Html.Raw(" ") @card.CardNumber.Substring(16, 3)</label></h4>
                            <a href="javascript:void(0)" onclick="XianXiangCardNumberSumbit();">
                                <i class="glyphicon glyphicon-chevron-right"></i>
                            </a>
                            <input type="checkbox" class="www radio" name="CheckdCardNumber" value="@card.CardNumber.Trim()" id="@card.CardNumber.Trim()">
                        </li>                       
                    }
                    else if (card.Status == 1)
                    {
                        <li class="hassubscribe">
                            <h4>@card.CardNumber.Substring(0, 4) @Html.Raw(" ") @card.CardNumber.Substring(4, 4) @Html.Raw(" ") @card.CardNumber.Substring(8, 4) @Html.Raw(" ")  @card.CardNumber.Substring(12, 4) @Html.Raw(" ") @card.CardNumber.Substring(16, 3) <em>已预约</em></h4>
                        </li>
                    }
                    else if (card.Status == 2)
                    {
                        <li class="hassubscribe">
                            <h4>@card.CardNumber.Substring(0, 4) @Html.Raw(" ") @card.CardNumber.Substring(4, 4) @Html.Raw(" ") @card.CardNumber.Substring(8, 4) @Html.Raw(" ")  @card.CardNumber.Substring(12, 4) @Html.Raw(" ") @card.CardNumber.Substring(16, 3) <em><strong>已成交</strong></em></h4>
                        </li>
                    }
                }
            </ul>

            <ul class="cardsList" id="tabs-2">
            </ul>

            <ul class="cardsList" id="tabs-3">
            </ul>
        </div>
    </div>
</body>
</html>
@section footer
    {
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    @*    <script src="~/Themes/RongJi/Style/xianxiangcardsubscribe/xianxiangcardselect/dist/js/zepto.min.js"></script>*@
    <img src="http://img.tongji.linezing.com/3547905/tongji.gif" style="display: none;">
    <script type="text/javascript">
        var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fd2c430d3acdc174f29f6feef73ea35fa' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <!-- Piwik -->
    <script type="text/javascript">
        //var chk_value = [];
        $(function () {
            //页面加载时，三个tab先隐藏
            $("#tabs-1").show();
            $("#tabs-2").hide();
            $("#tabs-3").hide();

            window.config.link = 'http://m.rongji365.com/Customer/XianXiangCardSubscribe';
            window.config.desc = '蓉记鲜鲜鲜开启招募尊享钻石VIP会员之旅。';
            window.config.title = '邀您诚鉴感恩之心，您就是我们的鲜享家！';
            window.config.imgUrl = 'http://m.rongji365.com/Themes/RongJi/Style/xianxiangcardsubscribe/assets/img/sharelogo.jpg';
            window.config.img_url = 'http://m.rongji365.com/Themes/RongJi/Style/xianxiangcardsubscribe/assets/img/sharelogo.jpg';

            var chk_value = [];
            $(document).on("click", ".www", function () {//修改成这样的写法
                //$('input[name="CheckdCardNumber"]:checked').each(function () {
                //    alert($(this).val());
                //});

                if (chk_value.length >= 2 && $(this).prop("checked")) {
                    alert("只能选择2个鲜享家靓号");

                    return false;
                }

                chk_value = [];
                $('input[name="CheckdCardNumber"]:checked').each(function () {
                    if (chk_value.indexOf($(this).val()) == -1) {
                        chk_value.push($(this).val());
                    }
                });
                $("#SelectedCardNumber").val(chk_value);
            });
        });

        //预约鲜享卡
        function XianXiangCardNumberSumbit() {
            var selectedCardNumber = $.trim($("#SelectedCardNumber").val());
            var selectedCardNumberList = selectedCardNumber.split(',');
            //alert(selectedCardNumberList.length);

            if (selectedCardNumber == '') {
                alert("请选择鲜享家靓号");

                return false;
            }
            if (selectedCardNumberList.length > 2) {
                alert("只能选择2个鲜享家靓号");

                return false;
            }

            window.location.href = '/Customer/XianXiangCardNumberSumbit?cardNumber=' + selectedCardNumberList;
        }



        //切换'全部','卡段连号','位数同号','自选号码' tab
        function changeDetailTable(thi, evt, index) {
            //全部
            if (index == 1) {
                $("#tabs-2").hide();
                $("#tabs-3").hide();
                $("#tabs-1").show();

                $("#allCard").addClass('active');
                $("#lianhaoCard").removeClass();
                $("#weishuxiangtongCard").removeClass();
                $("#zixuanCard").removeClass();

                if ($.trim($("#tabs-1").text()) == "") {
                    getXianXIangCard(-1);
                }
            }
            else if (index == 2) {//卡段连号
                $("#tabs-1").hide();
                $("#tabs-3").hide();
                $("#tabs-2").show();

                $("#lianhaoCard").addClass('active');
                $("#allCard").removeClass();
                $("#weishuxiangtongCard").removeClass();
                $("#zixuanCard").removeClass();
                if ($.trim($("#tabs-2").text()) == "") {
                    getXianXIangCard(1);
                }
            }
            else if (index == 3) {//位数同号
                $("#tabs-1").hide();
                $("#tabs-2").hide();
                $("#tabs-3").show();

                $("#weishuxiangtongCard").addClass('active');
                $("#allCard").removeClass();
                $("#lianhaoCard").removeClass();
                $("#zixuanCard").removeClass();
                if ($.trim($("#tabs-3").text()) == "") {
                    getXianXIangCard(2);
                }
            }
        }

        function getXianXIangCard(type) {
            $.ajax({
                type: "GET",
                url: "/Customer/XianXiangCardSelectByAjaxRequest?type=" + type,
                success: function (response) {
                    var $table;
                    if (type == -1) {
                        $("#tabs-1").empty();
                        if (response.length < 3) {
                            $("#tabs-1").append('<p>暂无此号段</p>');
                        } else {
                            $("#tabs-1").append(response);
                        }
                    }
                    else if (type == 1) {
                        $("#tabs-2").empty();
                        if (response.length < 3) {
                            $("#tabs-2").append('<p>暂无此号段</p>');
                        } else {
                            $("#tabs-2").append(response);
                        }
                    }
                    else if (type == 2) {
                        $("#tabs-3").empty();
                        if (response.length < 3) {
                            $("#tabs-3").append('<p>暂无此号段</p>');
                        } else {
                            $("#tabs-3").append(response);
                        }
                    }
                },
                error: function (err) {
                    //alert(err);
                    return false;
                }
            });
        };


    </script>

}
